<template>
    <div>
        <h1>vuex1组件</h1>
        <div>
            <h5>直接在视图中获取vuex的数据</h5>
            <div>用户是：{{ $store.state.username }}</div>
            <div>年龄是：{{ $store.state.age }}</div>
        </div>

        <hr />

        <div>
            <h5>映射在视图中获取vuex的数据</h5>
            <div>用户是：{{ username }}</div>
            <div>年龄是：{{ age }}</div>
        </div>

        <hr />

        <div>
            <h5>通过直接操作的方式修改数据（同步）</h5>
            <div>
                <button @click="changeSync1">点击修改仓库中的数据</button>
            </div>
        </div>

        <hr />

        <div>
            <h5>通过映射操作的方式修改数据（同步）</h5>
            <div>
                <button @click="changeSync2">点击修改仓库中的数据</button>
            </div>
        </div>

        <hr />

        <div>
            <h5>通过直接操作的方式修改数据（异步）</h5>
            <div>
                <button @click="changeAsync1">点击修改仓库中的数据</button>
            </div>
        </div>

        <hr />

        <div>
            <h5>通过映射操作的方式修改数据（异步）</h5>
            <div>
                <button @click="changeAsync2">点击修改仓库中的数据</button>
            </div>
        </div>

        <hr />
        <div>
            <h5>getters的使用</h5>
            <div>直接获取：{{ $store.getters.parseGender }}</div>
            <div>映射获取：{{ parseGender }}</div>
        </div>
    </div>
</template>

<script>
// 方式2：使用映射的方式来操作vuex
// 下面四个映射系列的方法，在用的时候注意位置：
// mapState和mapGetters，需要在computed中使用（组件会将vuex中的state与getters中的内容映射成当前组件自身的属性）
// mapMutations和mapActions，需要在methods中使用（组件会vuex中的mutations和actions中的内容映射成当前组件自身的方法）
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
    // 在created周期中去操作vuex
    created() {
        // 方式1：获取vuex中的初始化的数据
        console.log("直接获取用户名：" + this.$store.state.username);
        console.log("直接获取年龄：" + this.$store.state.age);
        // 修改（自嗨行为）
        // this.$store.state.username = "zhangsanfeng";
        // this.$store.state.age = 88;
        // 方式2：使用映射的方式来获取数据
        console.log("映射获取用户名：" + this.username);
        console.log("映射获取年龄：" + this.age);

        // 获取getters
        // 方式1：通过直接获取的方式
        console.log("直接获取处理好的性别：" + this.$store.getters.parseGender);
        // 方式2：通过映射的方式获取
        console.log("映射方式获取处理好的性别：" + this.parseGender);
    },
    // 映射state和getters
    computed: {
        // 以数组的形式告知mapState我们需要取出的数据，映射完毕之后当组件自身的属性去用就ok了
        ...mapState(["username", "age"]),
        ...mapGetters(["parseGender"]),
    },
    // 事件的处理程序
    methods: {
        // 将muations和actions映射成当前组件自身的方法
        ...mapMutations(["setUsername", "setAge"]),
        ...mapActions(["setUsernameAsync", "setAgeAsync"]),

        // 同步修改
        changeSync1() {
            // 方式1：通过store对象直接操作对应的方法实现的
            // 语法：this.$store.commit(方法名[,arg]);
            // 该方法最多只能接受2个形参，如果除了方法名以外还有更多（多于1的参数，可以将所有的参数整合成一个数组/对象形式传递）
            this.$store.commit("setUsername", "zhangsanfeng");
            this.$store.commit("setAge", 55);
        },
        changeSync2() {
            // 方式2：通过映射的方式来使用mutations
            // 语法：this.xxxxx([arg])
            this.setUsername("fawaikuangtu");
            this.setAge(45);
        },

        // 异步修改
        changeAsync1() {
            // 方式1：通过直接操作方式修改数据（异步）
            // 语法：this.$store.dispatch(方法名[,arg]);
            this.$store.dispatch("setUsernameAsync", "lisi");
            this.$store.dispatch("setAgeAsync", 10);
        },
        changeAsync2() {
            // 方式2：通过映射的方式调用异步代码
            this.setUsernameAsync("lisi");
            this.setAgeAsync(20);
        },
    },
};
</script>
